import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  AsyncStorage
} from 'react-native';

import Storage from 'react-native-storage';


var storage = new Storage({
    // 最大容量，默认值1000条数据循环存储
    size: 1000,

    // 存储引擎：对于RN使用AsyncStorage，对于web使用window.localStorage
    // 如果不指定则数据只会保存在内存中，重启后即丢失
    storageBackend: AsyncStorage,

    // 数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期
    defaultExpires: 1000 * 3600 * 24,

    // 读写时在内存中缓存数据。默认启用。
    enableCache: true,
})

// 最好在全局范围内创建一个（且只有一个）storage实例，方便直接调用

// 对于react native
global.storage = storage;



export default class App extends Component<{}> {

  // render前
  componentWillMount(){
      // 使用key来保存数据。这些数据一般是全局独有的，常常需要调用的。
      // 除非你手动移除，这些数据会被永久保存，而且默认不会过期。
      storage.save({
          key: 'loginState',  // 注意:请不要在key中使用_下划线符号!
          data: {
              from: 'some other site',
              userid: '后盾人',
              token: 'some token'
          },

          // 如果不指定过期时间，则会使用defaultExpires参数
          // 如果设为null，则永不过期
          expires: 1000 * 3600
      });

  }


  // render后
  componentDidMount(){
      // 读取
      storage.load({
          key: 'loginState',
      }).then(ret => {
          // 如果找到数据，则在then方法中返回
          // 注意：这是异步返回的结果（不了解异步请自行搜索学习）
          // 你只能在then这个方法内继续处理ret数据
          // 而不能在then以外处理
          // 也没有办法“变成”同步返回
          // 你也可以使用“看似”同步的async/await语法

          alert(ret.userid);
          this.setState({ user: ret });
      })
  }



  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },

});
